<template>
 <div class="settingRow">
  <div class="setting">
    <img class="settingImg" :src="m31" @click="handleDefaultExpandAll(1)" alt="" srcset="">
    <img class="settingImg" :src="m32" @click="handleDefaultExpandAll(2)"  alt="" srcset="">
    <a-popover placement="bottom">
        
      <template #content>
          <div class="treeList">
          <a-button class="treeList1" type="text">专业设计树</a-button>
          <a-button class="treeList1" type="text">空间结构树</a-button>
          <a-button class="treeList1" type="text">标注树</a-button>
          </div>
        </template>
      <img class="settingImg" :src="m33" @click="handleDefaultExpandAll(3)" alt="" srcset="">
    </a-popover>
       <a-popconfirm   placement="topRight" :showCancel="false">
        <template #icon></template>
        <template #title>
          <div class="treeListtITLE">树列设置</div>
        </template>

      <template #description>
          <div class="treeList">
            <Transfer/>
           </div>
        </template>
         
        <template #okButton>
          <a-button class="btn1" size="Default">应用</a-button> 
          <a-button class="btn1" size="Default">重置</a-button>
          <a-button class="btn2" size="Default">确定</a-button>
          <a-button class="btn1" size="Default">取消</a-button>
        </template>
       

    <img class="settingImg" :src="m34" @click="handleDefaultExpandAll(4)" alt="" srcset="">
    </a-popconfirm >
    
    <img class="settingImg1" :src="m35" @click="handleDefaultExpandAll(5)" alt="" srcset="">
  </div>
 </div>
 
</template>
<script setup lang='ts'>
 import Transfer from '@/components/modelPage/Transfer.vue';
import m31 from "../../assets/img/m31.png" 
import m32 from "../../assets/img/m32.png" 
import m33 from "../../assets/img/m33.png" 
import m34 from "../../assets/img/m34.png" 
import m35 from "../../assets/img/m35.png" 
const emits=defineEmits(['']);

function handleDefaultExpandAll(index:number){
  emits('handleDefaultExpandAll',index);
}
</script>
<style scoped lang="scss">
.settingRow{
  width: 100%;
 
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
}
.treeListtITLE{
  border-radius: 4px 4px 0px 0px;
  // background: rgba(230, 248, 250, 1);
   color: rgba(0, 0, 0, 1);
  font-family: PingFang SC;
  font-size: 16px;
  padding: 12px;
}
 .ant-popover .ant-popover-inner {
  padding-top:0px!important;
}
.treeList{
  display: flex;
  flex-direction: column;
  justify-content: start;
}
.treeList1{
  text-align: left;
}
  .btn1{
    // width: 51px;
    // height: 24px;
    //  height: 24px;
    // line-height: 24px;
    // text-align: center;
    color: rgba(0, 0, 0, 1);
  // font-family: PingFang SC;
  // font-size: 12px;
background: rgb(237, 237, 237);
border: none;
        }
  .btn2{
    //   width: 51px;
    // height: 24px;
    // line-height: 24px;
    // text-align: center;
    
    color: #fff;
border: none;

  // font-family: PingFang SC;
  // font-size: 12px;
background:   rgb(0, 174, 198)
        }
        .btn2:hover{
          color: #fff;
        }
       
.setting{
  width: 83px;
  height: 14px;
  margin-top: 11px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  .settingImg{
    width: 14px;
    height:14px;
    display: block;
  }
  .settingImg1{
    width: 6px;
    height:5px;
    display: block;
  }
}
</style>